<include file="Index/teacherheader"/>
<style>
    .list-title {
      text-align: center;
      padding: 20px;
    }
    #questionList {
      text-align: center;
    }
    th {
      text-align: center;
    }
</style>
    <if condition="session('teacher')">
    <else />
        <script type="text/javascript">
            window.location.href = '{:U("/Home/Teacher/login")}';
        </script>
    </if>
    <div class="list-title">
        <h1>试题列表</h1>
    </div>
    <div class="am-contrainer">
        <div class="am-g am-u-sm-10 am-u-sm-centered">
            <table id="questionList" class="am-table am-table-bordered">
                <thead>
                    <tr>
                        <th>试题编号</th>
                        <th>试题名称</th>
                        <th>试题内容</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="am-modal am-modal-no-btn" tabindex="-1" id="my-modal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">试题内容
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd" id="questionContent">
                <table id="questionContentTable" class="am-table am-table-bordered">
                    <thead>
                        <tr>
                            <th>题目</th>
                            <th>答案</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="set-exam-info">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">设置考试信息
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <div class="am-input-group">
                    <span class="am-input-group-label">考试名称</span>
                    <input type="text" class="am-form-field" id="exam-name">
                </div>
                <div class="am-input-group">
                    <span class="am-input-group-label">所需时间</span>
                    <input type="number" class="am-form-field" id="spend-time">
                    <span class="am-input-group-label">秒</span>
                </div><br>
                <button class="am-u-sm-centered" onclick="arrangeExam()">安排考试</button>
            </div>
        </div>
    </div>
<include file="Index/footer"/>

<script type="text/javascript">
    $(document).ready(function($) {

        $.ajax({
            url: '{:U("/Home/Teacher/getQuestionList")}',
            type: 'POST',
            dataType: 'json',
            data: {
                teacher_id: '{:I("session.teacher")["teacher_id"]}'
            }
        })
            .done(function(response) {
                $('#questionList').DataTable({
                    "bProcessing": true,
                    "bDestroy": true,
                    "sPaginationType" : "full_numbers",
                    "oLanguage" : {
                          "sLengthMenu": "每页显示 _MENU_ 条记录",
                          "sZeroRecords": "抱歉， 没有找到",
                          "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                          "sInfoEmpty": "没有数据",
                          "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                          "sZeroRecords": "没有检索到数据",
                           "sSearch": "搜索: &nbsp",
                          "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "尾页"
                          }
                      },
                    data: response,
                    columns: [
                        { data: 'question_id' },
                        { data: 'name' },
                        { data: 'question_content' }
                    ],
                    columnDefs: [
                        <!-- { -->
                        <!--     "targets": 0, -->
                        <!--     "visible":false -->
                        <!-- }, -->
                        {
                            "targets": -1,
                            "data": null,
                            "render": function (data, type, row, table) {
                                return '<button type="button" class="am-btn am-btn-primary" onclick="showQuestionContent(' + data + ')">' +  "试题内容" + '</button>  <button type="button" class="am-btn am-btn-success" onclick="setArrangingExamInfo(' + data + ')">' +  "安排考试" + '</button>';
                            }
                        }
                    ]
                } );
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    });

    function showQuestionContent(data){

        $.ajax({
            url: '{:U("/Home/Teacher/getQuestionContent")}',
            type: 'POST',
            dataType: 'json',
            data: {
                question_id: data
            }
        })
            .success(function(response) {
                <!-- var content = JSON.parse(response); -->
                console.log(response);
                $('#questionContentTable').DataTable({
                    "bProcessing": true,
                    "bDestroy": true,
                    "sPaginationType" : "full_numbers",
                    "oLanguage" : {
                          "sLengthMenu": "每页显示 _MENU_ 条记录",
                          "sZeroRecords": "抱歉， 没有找到",
                          "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                          "sInfoEmpty": "没有数据",
                          "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                          "sZeroRecords": "没有检索到数据",
                           "sSearch": "搜索: &nbsp",
                          "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "尾页"
                          }
                      },
                    bDestroy: true,
                    paging: false,
                    searching: false,
                    data: response,
                    "order": false,
                    columns:[
                        { data: 'text' },
                        { data: 'answer' }
                    ]
                });
                $("#my-modal").modal('open');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    var arranging_exam_question_id;

    function setArrangingExamInfo(question_id) {
        arranging_exam_question_id = question_id;
        $('#set-exam-info').modal('open');
    }

    function arrangeExam(){
        $.ajax({
            url: '{:U("/Home/Teacher/arrangeExam")}',
            type: 'POST',
            dataType: 'json',
            data: {
                teacher_id: '{:I("session.teacher")["teacher_id"]}',
                question_id: arranging_exam_question_id,
                exam_name: $('#exam-name').val(),
                spend_time: $('#spend-time').val()
            }
        })
            .done(function(response) {
                var result = response.message;
                alert(result.toString());
                location.reload();
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
</script>
